import {View, ViewProps} from 'react-native';
import React from 'react';
import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
import LinearGradient from 'react-native-linear-gradient';
import {Card} from 'tsun-smart-ui';

export default ({className,...props}:ViewProps) => {
  return (
    <View className={`gap-y-3 ${className}`} {...props}>
      {/* 设备状态卡片骨架屏 */}
      <Card className="rounded-xl shadow">
        <View className="flex-row justify-between items-center">
          <ShimmerPlaceHolder
            className="w-[100px] h-5 rounded"
            LinearGradient={LinearGradient}
            visible={false}
          />
          <ShimmerPlaceHolder
            className="w-20 h-5 rounded"
            LinearGradient={LinearGradient}
            visible={false}
          />
        </View>

        <View className="flex-row mt-4">
          <View className="w-[100px]">
            <ShimmerPlaceHolder
              className="w-20 h-[120px] rounded-lg"
              LinearGradient={LinearGradient}
              visible={false}
            />
          </View>

          <View className="flex-1">
            <View className="flex-row justify-between mb-4">
              <View>
                <ShimmerPlaceHolder
                  className="w-[150px] h-5 rounded mb-2"
                  LinearGradient={LinearGradient}
                  visible={false}
                />
                <ShimmerPlaceHolder
                  className="w-20 h-4 rounded mb-1"
                  LinearGradient={LinearGradient}
                  visible={false}
                />
                <ShimmerPlaceHolder
                  className="w-[120px] h-5 rounded"
                  LinearGradient={LinearGradient}
                  visible={false}
                />
              </View>
            </View>

            <View className="flex-row justify-between">
              <View>
                <ShimmerPlaceHolder
                  className="w-20 h-4 rounded mb-1"
                  LinearGradient={LinearGradient}
                  visible={false}
                />
                <ShimmerPlaceHolder
                  className="w-[120px] h-5 rounded"
                  LinearGradient={LinearGradient}
                  visible={false}
                />
              </View>
              <View>
                <ShimmerPlaceHolder
                  className="w-20 h-4 rounded mb-1"
                  LinearGradient={LinearGradient}
                  visible={false}
                />
                <ShimmerPlaceHolder
                  className="w-[120px] h-5 rounded"
                  LinearGradient={LinearGradient}
                  visible={false}
                />
              </View>
            </View>
          </View>
        </View>
      </Card>

      {/* 光伏功率骨架屏 */}
      <Card className="rounded-xl shadow">
        <View className="flex-row justify-between items-center mb-4">
          <View className="flex-row items-center">
            <ShimmerPlaceHolder
              className="w-6 h-6 rounded-full mr-2"
              LinearGradient={LinearGradient}
              visible={false}
            />
            <ShimmerPlaceHolder
              className="w-[100px] h-5 rounded"
              LinearGradient={LinearGradient}
              visible={false}
            />
          </View>
          <ShimmerPlaceHolder
            className="w-[100px] h-6 rounded"
            LinearGradient={LinearGradient}
            visible={false}
          />
        </View>

        <View className="flex-row flex-wrap justify-between">
          {[1, 2, 3, 4].map(item => (
            <ShimmerPlaceHolder
              key={item}
              className="w-[48%] h-20 rounded-lg mb-3"
              LinearGradient={LinearGradient}
              visible={false}
            />
          ))}
        </View>
      </Card>

      {/* 输出功率和今日发电量骨架屏 */}
      <View className="flex-row justify-between">
        {/* 输出功率骨架屏 */}
        <Card className="w-[48%] rounded-xl min-h-[100px] shadow">
          <View className="flex-row items-center mb-2">
            <ShimmerPlaceHolder
              className="w-6 h-6 rounded-full mr-2"
              LinearGradient={LinearGradient}
              visible={false}
            />
            <ShimmerPlaceHolder
              className="w-20 h-4 rounded"
              LinearGradient={LinearGradient}
              visible={false}
            />
          </View>

          <ShimmerPlaceHolder
            className="w-[100px] h-6 rounded"
            LinearGradient={LinearGradient}
            visible={false}
          />

          <View className="mt-2">
            <ShimmerPlaceHolder
              className="w-[120px] h-4 rounded mb-1"
              LinearGradient={LinearGradient}
              visible={false}
            />
            <ShimmerPlaceHolder
              className="w-[120px] h-4 rounded"
              LinearGradient={LinearGradient}
              visible={false}
            />
          </View>
        </Card>

        {/* 今日发电量骨架屏 */}
        <Card className="w-[48%] rounded-xl min-h-[100px] shadow">
          <View className="flex-row items-center mb-2">
            <ShimmerPlaceHolder
              className="w-6 h-6 rounded-full mr-2"
              LinearGradient={LinearGradient}
              visible={false}
            />
            <ShimmerPlaceHolder
              className="w-20 h-4 rounded"
              LinearGradient={LinearGradient}
              visible={false}
            />
          </View>

          <ShimmerPlaceHolder
            className="w-[100px] h-6 rounded"
            LinearGradient={LinearGradient}
            visible={false}
          />

          <View className="mt-2">
            <ShimmerPlaceHolder
              className="w-[120px] h-4 rounded mb-1"
              LinearGradient={LinearGradient}
              visible={false}
            />
            <ShimmerPlaceHolder
              className="w-[120px] h-4 rounded"
              LinearGradient={LinearGradient}
              visible={false}
            />
          </View>
        </Card>
      </View>

      {/* 设备控制骨架屏 */}
      <Card className="rounded-xl shadow">
        <View className="flex-row justify-between items-center py-2">
          <View className="flex-row items-center">
            <ShimmerPlaceHolder
              className="w-[42px] h-[42px] rounded-full mr-2.5"
              LinearGradient={LinearGradient}
              visible={false}
            />
            <ShimmerPlaceHolder
              className="w-[100px] h-5 rounded"
              LinearGradient={LinearGradient}
              visible={false}
            />
          </View>
          <ShimmerPlaceHolder
            className="w-6 h-6 rounded-full"
            LinearGradient={LinearGradient}
            visible={false}
          />
        </View>

        <View className="flex-row items-center  pl-1 pb-1 h-[30px]">
          <ShimmerPlaceHolder
            className="w-[30px] h-[30px] rounded-full mr-1.5"
            LinearGradient={LinearGradient}
            visible={false}
          />
          <ShimmerPlaceHolder
            className="w-[150px] h-[18px] rounded"
            LinearGradient={LinearGradient}
            visible={false}
          />
        </View>
      </Card>

      {/* 告警信息骨架屏 */}
      <Card className="rounded-xl shadow">
        <View className="flex-row items-center mb-4">
          <ShimmerPlaceHolder
            className="w-6 h-6 rounded-full mr-2"
            LinearGradient={LinearGradient}
            visible={false}
          />
          <ShimmerPlaceHolder
            className="w-[100px] h-5 rounded"
            LinearGradient={LinearGradient}
            visible={false}
          />
        </View>

        <View className="flex-row items-center">
          <ShimmerPlaceHolder
            className="w-9 h-9 rounded-full mr-3"
            LinearGradient={LinearGradient}
            visible={false}
          />
          <View className="flex-1">
            <ShimmerPlaceHolder
              className="w-[100px] h-4 rounded mb-1"
              LinearGradient={LinearGradient}
              visible={false}
            />
            <ShimmerPlaceHolder
              className="w-[200px] h-4 rounded"
              LinearGradient={LinearGradient}
              visible={false}
            />
          </View>
          <ShimmerPlaceHolder
            className="w-[50px] h-3.5 rounded"
            LinearGradient={LinearGradient}
            visible={false}
          />
        </View>
      </Card>
    </View>
  );
};
